<template>
  <div>
    <div class="box">
      <div class="card1">
        <h3>用户/地址管理</h3>
        <el-divider></el-divider>
        <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline" size="small">
          <el-form-item label="用户名" prop="accountName">
            <el-input v-model="formInline.accountName" placeholder="请输入用户名"></el-input>
          </el-form-item>
          
          <el-form-item label="注册时间" prop="createTime">
            <el-date-picker
                v-model="formInline.createTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          
          <el-form-item label="用户状态" prop="isDelete">
            <el-select v-model="formInline.isDelete" placeholder="请选择交易状态" style="width: 190px;">
              <el-option label="正常" value="0"></el-option>
              <el-option label="被举报" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="selectAllAccount">查询</el-button>
            <el-button type="info" @click="resetInfo">重置</el-button>
          </el-form-item>
        </el-form>
        <el-divider></el-divider>
        <!--订单表格-->
        <el-table
            :data="tableData"
            stripe
            border
            style="width: 100%">
          <el-table-column prop="accountId" label="用户编号" align="center" width="110px" sortable ></el-table-column>
          <el-table-column prop="accountName" label="用户名" align="center" width="80px"></el-table-column>
          <el-table-column  label="默认收货地址" align="center">
            <template slot-scope="scope">
                <span>{{scope.row.proviceName + scope.row.cityName + scope.row.areaName + scope.row.streetName + scope.row.villagesName}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="注册时间"  align="center"></el-table-column>
<!--          <el-table-column prop="recentTime" label="最近下单时间" align="center"></el-table-column>-->
          <el-table-column prop="count" label="下单数" width="80px" align="center"></el-table-column>
          <el-table-column prop="isDelete" label="用户状态" width="100px" align="center">
            <template slot-scope="{row}">
              <span v-if="row.isDelete === 0">正常</span>
              <span v-if="row.isDelete === 1">此用户已被删除</span>
              <span v-if="row.isDelete === 2">此用户已被举报</span>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="举报原因" width="160px" align="center">
            <template slot-scope="{row}">
              <span v-if="row.remark === ''||row.remark===null">无</span>
              <span v-else>{{row.remark}}</span>
            </template>
          </el-table-column>
          

          <el-table-column fixed="right" label="操作" align="center" >
            <template slot-scope="scope">
              <el-button @click="DialogComplaintAccount(scope.row)" type="warning" size="mini" v-if="scope.row.isDelete === 0">举报用户</el-button>
              <el-button @click="cancelcomplaint(scope.row)" type="danger" size="mini" v-if="scope.row.isDelete === 2">取消举报</el-button>
              <br>
            </template>
          </el-table-column>
        </el-table>
        <el-divider></el-divider>
        <template>
          <el-dialog width="30%" title="投诉此评价原因" :visible.sync="innerVisible" append-to-body close-on-press-escape>
            <el-input v-model="complaintAccountReason" placeholder="请填写投诉该用户理由" maxlength="30" show-word-limit/>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="ComplaintAccount()">举报用户</el-button>
              <el-button @click="innerVisible = false">退出</el-button>
            </div>
          </el-dialog>
        </template>
        
<!--投诉用户-->
        
        <!--分页插件-->
        <el-pagination align="center"  style="margin-top:30px; "
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="pageNum"
                       :page-sizes="[5, 10, 15, 20]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "AccountView",
  data() {
    return {
      pageNum:1,
      pageSize:5,
      total:5,

      innerVisible: false,
      //投诉评价原因
      complaintAccountReason: '',
      
      formInline: {
        accountName:'',
        createTime: [],
        isDelete: '',
      },
      tableData: [],
      
      accountId: '',
    }
  },
  
  methods:{
    handleSizeChange(val) {
      this.pageSize = val;
      this.selectAllAccount();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.selectAllAccount();
    },
    //查询所有用户信息
    selectAllAccount(){
      console.log("-------查询所有用户信息----------")
      this.$axios.get("/account/selectAccountByMerchant",{
        params:{
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          accountName: this.formInline.accountName,
          startTime:this.formInline.createTime[0]?this.formInline.createTime[0].getTime():null,
          endTime:this.formInline.createTime[1]?this.formInline.createTime[1].getTime():null,
          isDelete: this.formInline.isDelete,
        }
      })
       .then(response => {
         
          if (response.data.code===200){
            this.$message({
              type:'success',
              message: '用户管理查询成功',
            });
            this.tableData = response.data.data.list;
            this.pageNum = response.data.data.pageNum;
            this.pageSize = response.data.data.pageSize;
            this.total = response.data.data.total;
          }
          
        })
    },
    
    resetInfo(){
      this.$refs.formInline.resetFields();
      this.selectAllAccount();
    },
    DialogComplaintAccount(row){
      this.innerVisible = true;
      this.accountId = row.accountId
    },
    
    //举报用户
    ComplaintAccount(){
      this.$confirm('确认投诉此用户吗？')
          .then(() => {
            this.$axios.get("/account/updateAccountStatusByAccountId",
                {
                  params: {
                    accountId: this.accountId,
                    remark: this.complaintAccountReason,
                    isDelete: 2,
                  }
                }
            ).then(response => {
              console.log(response)
              this.$message({
                type: "success",
                message: "投诉用户成功",
              });
              this.outerVisible = false;
              this.innerVisible = false;
              this.complaintAccountReason='';
              this.selectAllAccount();
            })
          })
          .catch(()=>{})
    },
    
    //取消举报用户
    cancelcomplaint(row){
      this.$confirm('确认撤销举报此用户吗？')
          .then(() => {
            this.$axios.get("/account/updateAccountStatusByAccountId",
                {
                  params: {
                    accountId: row.accountId,
                    remark: '',
                    isDelete: 0,
                  }
                }
            ).then(response => {
              if (response.data.code ===200){
                this.$message({
                  type: "success",
                  message: "取消举报用户成功",
                });
                this.selectAllAccount();
              }
            })
          }).catch(()=>{})
    },
    
  },
  
  mounted() {
    this.selectAllAccount();
  }
}
</script>

<style scoped lang="less">
.box {
  border-radius: 4px;
  border: 1px solid white;
  background-color: white;
  margin: 30px 100px;
}

.box .card1 {
  margin: 20px 10px;
  text-align: left;
}
</style>